<template>
  <div>
    <div
      ref="behaviorRef"
      :id="id"
      :style="{
        width,
        height
      }"
    ></div>
    <span class="x_label_line" :style="lineStyle"></span>

    <div v-if="isShowFooter" class="analysis_data">
      <div class="data_body">
        <div class="data_title">
          <span class="num">{{ formatTime(footerData.teach_duration) }}</span
          ><span>分钟</span>
        </div>
        <span>讲授时长</span>
      </div>

      <div class="data_body">
        <div class="data_title">
          <span class="num">{{ formatTime(footerData.interaction_duration) }}</span
          ><span>分钟</span>
        </div>
        <span>互动时长</span>
      </div>

      <div class="data_body">
        <div class="data_title">
          <span class="num">{{ formatTime(footerData.guidance_duration) }}</span
          ><span>分钟</span>
        </div>
        <span>指导时长</span>
      </div>

      <div class="data_body">
        <div class="data_title">
          <span class="num">{{ formatTime(footerData.blackboard_duration) }}</span
          ><span>分钟</span>
        </div>
        <span>板书时长</span>
      </div>
    </div>
  </div>
</template>
<script>
const echarts = require("echarts/lib/echarts");
export default {
  props: {
    lineStyle: {
      type: Object,
      default: () => {}
    },

    // 图表的宽度设置
    width: {
      type: String,
      default: "400px"
    },
    id: {
      type: String,
      default: ""
    },

    height: {
      type: String,
      default: "400px"
    },
    //是否显示底部数据
    isShowFooter: {
      type: Boolean,
      default: false
    },
    footerData: {
      type: Object,
      default: () => {}
    },
    option: {
      type: Object,
      default: () => {}
    },
    textColor: {
      type: String,
      default: ""
    }
  },
  computed: {
    formatTime() {
      return (value) => {
        const minutes = value / 60;
        return minutes.toFixed(1);
      };
    }
  },
  methods: {
    initEchart() {
      const dom = this.$refs.behaviorRef;
      const behaviorChart = echarts.init(dom);

      behaviorChart.setOption(this.$props.option);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchart();
    });
  }
};
</script>
<style lang="scss" scoped>
.x_label_line {
  position: relative;
  bottom: 20px;
  display: flex;
  width: 85%;
  margin: 0 auto;
  height: 1px;
  background-color: #fff;
}
.analysis_data {
  display: flex;
  justify-content: space-evenly;
  background: linear-gradient(180deg, rgba(19, 69, 116, 0.3) 0%, #134574 100%);
  border-radius: 6px;
  margin-right: 20px;
  margin-left: 15px;
  padding: 10px 20px;
  margin-top: 15px;
  .data_body {
    display: flex;
    flex-direction: column;
    color: #ccc;

    .data_title {
      display: flex;
      align-items: center;

      .num {
        font-size: 20px;
        height: 20px;
        font-weight: bold;
      }
    }
  }
}
</style>
